<script lang='ts' setup>
import { reactive } from 'vue'
import { useRoute } from 'vue-router'
import { getLibraryDetails } from '../../api/home';
import  { baseURL } from '@/utils/config'
let route = useRoute()
let details:any = reactive({form:{
  libraryId: '',
  title: '', // '产品标题',
  productDescribe: '', // '产品描述',
  cover: '', // '产品封面',
  brand: '', // '产品品牌',
  price: '', // '产品价格',
  discountedPrice: '', // '产品折扣价格',
  model: '', // '产品型号',
  materialQuality: '', // '产品材质',
  specifications: '', // '产品规格',
  features: '', // '产品特性',
  show_img: '', // '产品展示',
  createBy: '', // '创建者',
  createTime: '', // '创建时间',
  updateBy: '',
  updateTime: '',
  remark: '',
}})
const getData = () => {
  getLibraryDetails({libraryId:route.params.id }).then((res:any) => {
    console.log('产品详情', res)
    console.log('', res.data.showImg.split(','))
    details.form = res.data
  })
}
getData()
</script>

<template>
  <div class='details'>
    <h3 style="text-align: center;">{{ details.form?.title }}</h3>
    <div class="cover">
      <img style="width: 100%;" :src="baseURL()+details.form?.cover" alt="" srcset="">
    </div>
    <van-cell-group>
      <van-cell title="产品名称" :value="details.form?.title" />
      <van-cell title="产品品牌" :value="details.form?.brand" />
      <van-cell title="产品价格" :value="details.form?.price" />
      <van-cell title="产品型号" :value="details.form?.model" />
      <van-cell title="产品材质" :value="details.form?.materialQuality" />
      <van-cell title="产品规格" :value="details.form?.specifications" />
      <van-cell title="产品特性" :value="details.form?.features" />
      <van-cell title="产品展示" >
        <template #label>
          <img v-for="item,k in details.form?.showImg?.split(',')" :key="k" style="width: 100%;" :src="baseURL()+item" alt="" srcset="">
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<style lang='scss' scoped>
.details{
  padding: 0px 10px;
  height: 100%;
  overflow: scroll;
}
</style>